<template>
  <!-- <div class="form-wrap">
      <form  class="login-form" method="post" @submit="login">
          <div class="input-account">
              <input type="text" name="account" id="account" placeholder="请输入邮箱" class="inputTxt" @blur.stop="legalEmail" v-model="formData.account">
              <label for="account" class="input-tips">{{account_msg}}</label>
          </div>
          <div class="input-password">
              <input type="password" name="password" id="password" placeholder="请输入密码" class="inputTxt" @blur.stop="legalPassword" v-model="formData.password">
              <label for="password" class="input-tips">{{pw_msg}}</label>
          </div>
          <div class="login-tips">
              <span>白洞!白色的明天在等着我们~</span><br>
              <span>就是这样~喵~~o( =∩ω∩= )m</span>
          </div>
          <div class="input-button">
              <button type="submit" class="login-button">登录</button>
          </div>
      </form>
      <div class="more-info">
          <div class="info-help">
              忘记密码?
          </div>
      </div>
  </div> -->
  <div class="form-wrap">
      <transition name="messagebox">
          <div class="messagebox-wrap" v-if="showMsg">
              <div class="messagebox">
                  <span>{{msg}}</span>
              </div>
          </div>
      </transition>
      <div  class="login-form">
          <div class="input-account">
              <input type="text" name="account" id="account" placeholder="请输入邮箱" class="inputTxt" @blur.stop="legalEmail" v-model="formData.account">
              <label for="account" class="input-tips">{{account_msg}}</label>
          </div>
          <div class="input-password">
              <input type="password" name="password" id="password" placeholder="请输入密码" class="inputTxt" @blur.stop="legalPassword" v-model="formData.password">
              <label for="password" class="input-tips">{{pw_msg}}</label>
          </div>
          <div class="login-tips">
              <span>白洞!白色的明天在等着我们~</span><br>
              <span>就是这样~喵~~o( =∩ω∩= )m</span>
          </div>
          <div class="input-button">
              <button class="login-button" @click.stop="login" >登录</button>
          </div>
      </div>
      <div class="more-info">
          <div class="info-help">
              忘记密码?
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name:'login-form',
    data: ()=>{
        return {
            showMsg:false,
            msg:'',
            msg_timer:null,
            formData:{
                account:'',
                password:''
            },
            account_msg:'',
            pw_msg:''
        }
    },
    methods:{
        legalEmail(){
            let regex = new RegExp('^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$');
            
            if(!regex.test(this.formData.account)){
                this.account_msg = '请输入正确的邮箱格式';
                return false;
            }
            this.account_msg = '';
            return true;
        },
        legalPassword(){
            let regex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');
            if(!regex.test(this.formData.password)){
                this.pw_msg = '密码必须包含字母、数字且大于8个字符';
                return false;
            }
            this.pw_msg = '';
            return true;
        },
        login(){
            if(this.showMsg === false){
                if(this.legalEmail() && this.legalPassword()){
                const data = this.formData;
                this.axios({
                    url:'http://localhost:8081/user/login',
                    method:'post',
                    header:{'Content-Type':'application/json'},
                    data:data
                }).then(res=>{
                    //登陆成功,将token信息存入localStorage中;
                    localStorage.setItem('token',res.data.token);
                    localStorage.setItem('userInfo',JSON.stringify(res.data.user));
                    console.log(JSON.parse(localStorage.getItem('userInfo')));
                    this.$router.replace('/');
                }).catch(error=>{
                    if(this.showMsg === false){
                        this.msg = error.response.data.message;
                        this.showMsg = !this.showMsg;
                        clearTimeout(this.msg_timer);
                        this.msg_timer = setTimeout(()=>{
                            if(this.showMsg === true){
                                this.showMsg = !this.showMsg;
                            }
                        },2000);
                    }
                    
                })
            }
            }
            
        }
    }
}
</script>

<style lang='less' scoped>
@import '../../../assets/styles/common.less';
    .form-wrap{
        display: flex;
        flex-direction: column;
        .messagebox-enter-active{
            transition: all .25s;
        }
        .messagebox-leave-active{
            transition: all 1s;
        }
        .messagebox-enter,.messagebox-leave-to{
            transform: translateY(-100%);
            opacity: 0;
        }
        .messagebox-wrap{
            position: absolute;
            font-size:12rem / @baseFont;
            color: #FFF;
            top: 75rem/@baseFont;
            padding: 0 16rem/@baseFont;
            width: 100%;
            display: flex;
            .messagebox{
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #F1403C;
                padding: 14rem/@baseFont 24rem/@baseFont;
                border-radius: 5rem/@baseFont;
                width: 100%;
            }
            
        }
        
        .login-form{
            display: flex;
            flex-direction: column;
            padding: 20rem/@baseFont 16rem/@baseFont;
            .login-tips,.input-button,.input-password,.input-account{
                display: flex;
                flex-direction: column;
                margin-bottom: 15rem/@baseFont;
                .inputTxt{
                    font-size:16rem / @baseFont;
                    height: 45rem /@baseFont;
                    outline: none;
                    padding: 0 10rem/@baseFont;
                    margin: 0;
                    border:1rem/@baseFont solid #dcdee2;
                    border-radius: 2rem/@baseFont;
                    color: #333333;
                }
                .input-tips{
                    color: #ff6060;
                    font-size: 14rem/@baseFont;
                    margin: 6rem/@baseFont 0 4rem/@baseFont 0;
                }
            }
            .input-button{
                margin: 0;
            }
            .login-button{
                font-size:16rem / @baseFont;
                background-color: #0084ff;
                border-color: #0084ff;
                height: 40rem/@baseFont;
                color: #FFF;
                border: 1rem /@baseFont;
                border-radius: 3rem/@baseFont;
                outline: none;
            }
            .login-tips{
                justify-content: center;
                color: #8590a6;
                align-items: center;
                font-size: 12rem/@baseFont;
                
                a{
                    text-decoration: underline;
                    color: #8590a6;
                }
            }
            
        }
        .more-info{
            padding: 0 16rem/@baseFont;
            font-size: 16rem/@baseFont;
            color: #175199;
            display: flex;
            justify-content: flex-end;
            .info-login{
                a{
                    color: #175199;
                }
                a:active{
                    color: #175199;
                }
            }
        }
    }
</style>